<!-- 图片跳转区域按钮<流行，最新> -->
<template>
<div class="tabcontrol">
    <div v-for="(item,index) in titles" :key="index" class="tab-control-item">
        <span :class="{active:index===currentIndex}" @click="itemClick(index)">{{item}}</span>
    </div>
</div>
</template>

<script>
export default {
    name:'TabControl',
    props: {
        titles:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return {
            currentIndex:0
        }
    },
    methods: {
        itemClick(index){
            this.currentIndex = index;
            this.$emit('tabClick',index)  
        }
    }
}
</script>

<style scoped>
    .tabcontrol{
        display: flex;
        text-align: center;
        font-size: 15px;
        line-height: 2.66em;
        background-color: #fff;
    }

    .tab-control-item{
        flex: 1;
    }

    .active{
        color: var(--color-high-text);
        border-bottom: 3px solid var(--color-tint);
        padding: 3px;
    }
</style>



